import _http from '@/_http'
import React, { useCallback, useEffect, useState } from 'react'
import { withRouter } from 'react-router'
import './style.css'

function OrderDetail({ match }) {
  const [detail, setDetail] = useState(null)

  useEffect(() => {
    getData()
  }, [])
  const getData = useCallback(async () => {
    const res = await _http('/order/list?id=' + match.params.orderid)
    if (res.data.code === 1) {
      setDetail(res.data.data[0])
    } else {
      setDetail(null)
    }
  }, [match])

  if (!detail) {
    return <></>
  }

  return (
    <div className="o-detail">
      <div className="fd-list">
        {detail.foods.map(food =>
          <div className="fd-item" key={food._id}>
            <div className="f-left">
              <img src={food.img} alt={food._id} />
            </div>
            <div className="f-center">
              <div className="fc-name">{food.name}</div>
              <div className="fc-count">数量：*{food.count}</div>
            </div>
            <div className="f-right">￥{food.price}</div>
          </div>
        )}
      </div>

      <div className="o-info">
        <div className="if-item">
          <div className="if-label">点单人姓名：</div>
          <div className="if-value">{detail.name}</div>
        </div>
        <div className="if-item">
          <div className="if-label">订单编号：</div>
          <div className="if-value">{detail.id}</div>
        </div>
        <div className="if-item">
          <div className="if-label">下单时间：</div>
          <div className="if-value">{detail.order_time}</div>
        </div>
        <div className="if-item">
          <div className="if-label">下单价格：</div>
          <div className="if-value">{detail.price}元</div>
        </div>
        <div className="if-item">
          <div className="if-label">用户编号：</div>
          <div className="if-value">{detail.openid}</div>
        </div>
        <div className="if-item" style={{color: 'rgb(255 79 79)'}}>
          <div className="if-label">备注：</div>
          <div className="if-value">{detail.remark}</div>
        </div>
      </div>
    </div>
  )
}

export default withRouter(OrderDetail)